<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小公主的成长故事</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/story.css">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 背景粒子系统 -->
    <canvas id="particles-canvas"></canvas>
    
    <!-- 音乐控制 -->
    <div class="music-control">
        <button id="music-toggle" class="music-btn">🎵</button>
    </div>
    
    <!-- 导航栏 -->
    <nav class="top-nav">
        <button class="nav-btn" onclick="window.location.href='welcome.html'">🏠 首页</button>
        <h1 class="page-title">成长故事</h1>
        <button class="nav-btn" onclick="window.location.href='memories.html'">🎬 下一页</button>
    </nav>
    
    <!-- 主内容 -->
    <div class="story-container">
        <!-- 摩天轮背景 -->
        <div class="ferris-wheel">
            <div class="wheel">
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="gondola gondola-1">🎈</div>
                <div class="gondola gondola-2">🎀</div>
                <div class="gondola gondola-3">🧸</div>
                <div class="gondola gondola-4">⭐</div>
                <div class="gondola gondola-5">🌙</div>
                <div class="gondola gondola-6">🎵</div>
            </div>
        </div>
        
        <!-- 时间轴 -->
        <div class="timeline">
            <div class="timeline-header">
                <h2 class="timeline-title">小公主的第一年</h2>
                <p class="timeline-subtitle">每一个月都是珍贵的回忆</p>
            </div>
            
            <!-- 月份气球 -->
            <div class="months-container" id="months-container">

            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <button class="nav-button" onclick="window.location.href='welcome.html'">
                <span class="nav-icon">🏠</span>
                <span class="nav-label">首页</span>
            </button>
            <button class="nav-button" onclick="window.location.href='memories.html'">
                <span class="nav-icon">🎬</span>
                <span class="nav-label">回忆</span>
            </button>
            <button class="nav-button" onclick="window.location.href='invitation.html'">
                <span class="nav-icon">💌</span>
                <span class="nav-label">邀请</span>
            </button>
            <button class="nav-button" onclick="window.location.href='wishes.html'">
                <span class="nav-icon">💝</span>
                <span class="nav-label">祝福</span>
            </button>
        </div>
    </div>
    
    <!-- 音频 -->
    <audio id="background-music" loop>
        <source src="../audio/background.wav" type="audio/wav">
    </audio>
    
    <audio id="balloon-pop" preload="auto">
        <source src="../audio/pop.mp3" type="audio/mpeg">
    </audio>

    <script src="../js/particles.js"></script>
    <script src="../js/story.js"></script>
</body>
</html>

